<template>
	<view class="history-box">
		<u-navbar title="阅读历史">
			<view class="slot-wrap">
				<text @click="handleClearAll" v-show="historyList.length !== 0">清空</text>
			</view>
		</u-navbar>
		<view class="content-box">
			<view v-show="historyList.length !== 0" class="content-header">
				我已读过
				<text>{{historyCount}}</text>本书
			</view>
			<view class="content-book" v-show="historyList.length !== 0">
				<view v-for="(item, index) in historyList" :key="index" class="book-item">
					<view class="book-time">{{item.time}}</view>
					<view class="book-list">
						<detailCard v-for="(cItem,cIndex) in item.bookList" :key="cIndex" :name="cItem.name" :writer="cItem.writer"
						 :image="cItem.image" :id="cItem.id" :lastReadChapterName="cItem.lastReadChapterName" :lastReadChapter="cItem.lastReadChapter"
						 :timestamp="cItem.timestamp" @hanleDeleteThis="handleToDeleteThis" />
					</view>
				</view>
			</view>
			<u-empty v-show="historyList.length === 0" text="没有阅读记录" mode="list" margin-top="300" icon-size="200" font-size="30"></u-empty>
		</view>
	</view>
</template>

<script>
	import DetailCard from '../../components/DetailCard'
	export default {
		data() {
			return {
				historyList: [],
			}
		},
		components: {
			DetailCard
		},
		computed: {
			historyCount() {
				let count = 0;
				this.historyList.forEach((item) => {
					count = count + item.bookList.length;
				});
				return count;
			},
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				let bookList = uni.getStorageSync("bookList");
				if (bookList) {
					let _bookList = JSON.parse(bookList);
					let history = [];
					Object.entries(_bookList).forEach(([key, value]) => {
						if (value.lastReadTime) {
							history.push(value)
						}
					})
					history.forEach(item => {
						let _timestamp = `${item.lastReadDate.split('-').join('/')} ${item.lastReadTime}`;
						let timestamp = new Date(_timestamp).getTime();
						item.timestamp = timestamp;
					})
					let _historyList = _.groupBy(history, (item) =>
						item.lastReadDate
					);
					let historyList = [];
					Object.entries(_historyList).forEach(([key, value]) => {
						const itemList = _.orderBy(value, (o) => {
							return o.lastReadTime
						}, 'desc')
						historyList.push({
							time: key,
							bookList: itemList
						});
					})
					this.historyList = _.orderBy(historyList, (o) => {
						return o.time
					}, 'desc')
				}
			},
			handleClearAll() {
				let bookList = uni.getStorageSync("bookList");
				if (bookList) {
					let _bookList = JSON.parse(bookList);
					Object.entries(_bookList).forEach(([key, value]) => {
						if (value.lastReadTime) {
							delete value.lastReadTime;
							delete value.lastReadChapter;
							delete value.lastReadChapterName;
							delete value.lastReadDate;
							delete value.lastReadTime;
						}
					})
					uni.setStorageSync("bookList", JSON.stringify(_bookList))
					this.init();
				}
			},
			handleToDeleteThis(id) {
				let bookList = uni.getStorageSync("bookList");
				if (bookList) {
					let _bookList = JSON.parse(bookList);
					Object.entries(_bookList).forEach(([key, value]) => {
						if (value.lastReadTime && value.id === id) {
							delete value.lastReadTime;
							delete value.lastReadChapter;
							delete value.lastReadChapterName;
							delete value.lastReadDate;
							delete value.lastReadTime;
						}
					})
					uni.setStorageSync("bookList", JSON.stringify(_bookList))
					this.init();
				}
			}
		}
	}
</script>

<style scoped>
	.history-box {
		min-height: 100vh;
		background: rgba(245, 248, 252, 1);
	}

	.content-header {
		font-size: 30rpx;
		padding: 20rpx 40rpx;
	}

	.content-header span {
		color: rgba(145, 199, 255, 1);
		padding: 0 10rpx;
	}

	.content-book {
		border-top: 4rpx solid #e2e2e2;
		border-bottom: 4rpx solid #e2e2e2;
		padding: 0rpx 20rpx 0rpx 40rpx;
	}

	.book-item {
		padding: 20rpx 0rpx 20rpx 40rpx;
		border-left: 4rpx solid #e2e2e2;
		border-bottom: 4rpx solid #e2e2e2;
	}

	.book-item:last-child {
		border-bottom: none;
	}

	.book-time {
		font-size: 28rpx;
		color: rgba(6, 27, 65, 0.35);
		margin-bottom: 20rpx;
		position: relative;
	}

	.book-time::before {
		content: "";
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
		position: absolute;
		left: -56rpx;
		top: 8rpx;
		border: 4rpx solid #91c7ff;
		border-radius: 40rpx;
		background: white;
	}

	.book-list {}

	.book-list div {
		border-bottom: 1rpx solid #e2e2e2;
		padding-bottom: 20rpx;
	}

	.book-list div:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.slot-wrap {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		padding: 0 20px;
	}
</style>
